<template>
    <div class="page-box">
        <div id="ajax-hook"></div>
<div class="wrap">
    <div class="wpn">
        <div class="form-data pos">
            <a href=""><img src="../../../static/img/logo.png" class="head-logo"></a>
            <div class="change-login">
                <p class="account_number " :class="login_type=='account'?'on':''" @click="checkType('account')">账号登录</p>
                <p class="message " :class="login_type=='message'?'on':''" @click="checkType('message')">短信登录</p>
            </div>
            <div class="form1" :class="login_type=='account'?'':'hide'" >
                <p class="p-input pos">
                    <!-- <label for="num">手机号/用户名/UID/邮箱</label> -->
                    <input type="text" id="num" v-model="mobile" placeholder="手机号">
                    <span class="tel-warn num-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                </p>
                <p class="p-input pos">
                    <!-- <label for="pass">请输入密码</label> -->
                    <input type="password" style="display:none"/>
                    <input type="password" id="pass" v-model="password" autocomplete="new-password" placeholder="请输入密码">
                    <span class="tel-warn pass-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                </p>
                <p class="p-input pos code hide">
                    <!-- <label for="veri">请输入验证码</label> -->
                    <input type="text" id="veri"  placeholder="请输入验证码">
                    <img src="">
                    <span class="tel-warn img-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                    <!-- <a href="javascript:;">换一换</a> -->
                </p>
            </div>
            <div class="form2" :class="login_type=='message'?'':'hide'" >
                <p class="p-input pos">
                    <!-- <label for="num2">手机号</label> -->
                    <input type="number" id="num2" v-model="mobile" placeholder="手机号">
                    <span class="tel-warn num2-err hide"><em>账号或密码错误</em><i class="icon-warn"></i></span>
                </p>
                <p class="p-input pos">
                    <!-- <label for="veri-code">输入验证码</label> -->
                    <input type="number" id="veri-code" v-model="sms_code" placeholder="输入验证码">
                    <a href="javascript:;" class="send" @click="sendSms">发送验证码</a>
                    <span class="time hide"><em>120</em>s</span>
                    <span class="tel-warn error hide">验证码错误</span>
                </p>
            </div>
            <div class="r-forget cl">
                <a href="/register" class="z">账号注册</a>
                <a href="javascript:;" class="y">忘记密码</a>
            </div>
            <button class="lang-btn log-btn" @click="doLogin">登录</button>
            <div class="third-party">
                <a href="#" class="log-qq icon-qq-round"></a>
                <a href="#" class="log-qq icon-weixin"></a>
                <a href="#" class="log-qq icon-sina1"></a>
            </div>
            <p class="right">Powered by © 2018</p>
        </div>
    </div>
</div>
    </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      msg: '登录页',
      login_type:'account',

      mobile:'',
      sms_code:'',
      password:''
    }
  },
  onShow(){
    this.login_type = 'account'
  },
  methods: {
			checkType(type){
        this.$toast.center('切换登录方式');

				this.login_type = type
			},
			doLogin(){
        console.log('登录')
        var that = this;
        if(this.mobile.length != 11){
          console.log('请输入正确的手机号码')
          this.$toast.center('请输入正确的手机号码');
          return false;
        }
        if(this.login_type == 'message' && this.sms_code.length < 3){
          this.$toast.center('请输入验证码');
          //  this.$message('请输入验证码');
           console.log('请输入验证码')
          return false;
        }
        if(this.login_type == 'account' && this.password.length < 3){
          this.$toast.center('请输入密码');
          // this.$message('请输入密码');
          console.log('请输入密码')
          return false;
        }
        var reqObj = {
          mobile:this.mobile
        };
        if(this.login_type == 'message'){
          reqObj['sms_code'] = this.sms_code;
          reqObj['type'] = 2;
        }else{
          reqObj['password'] = this.password;
          reqObj['type'] = 1;
        }
        // this.$loading('登录中...');
        // this.$message('登录中...');
         console.log('登录中...')
        this.$api.login(reqObj).then((res)=>{
            // this.$message(res.msg);
            console.log(res.msg)
            that.$toast.center(res.msg);
            if(res.code == 200){
              // 登录成功
              console.log('登录成功',res.data.user)
              
              // this.$store.
              that.$store.dispatch('SetUserInfo',res.data.user).then(resA => {
                  console.log('设置成功')
                  // this.$router.push({path:'/home',query: {id:'1'}})
                  // that.$router.push({path:'/home'})
                  that.$router.push('/home')
                  // that.$router.push({ name: 'home' })

              }).catch((err) => {
                  console.log('设置失败',err)
                  // that.$message('登录中...');
                  // console.log(res.msg)
                  that.$toast.center('出错啦');
              })

              
            }
        }).catch(error => {
          // that.$loading.close();
            console.log('失败', error)
            this.$toast.center('出错啦');
            // this.$message('出错啦');
        })
			},
      sendSms(){
        if(this.mobile.length != 11){
          this.$toast.center('请输入正确的手机号码');
          console.log('请输入正确的手机号码')
          return false;
        }
        this.$api.sendSmsCode(this.mobile).then((res)=>{
            // this.$message(res.msg);
            console.log(res.msg)
        }).catch(error => {
            console.log('失败', error)
            this.$toast.center('出错啦');
            // this.$message('出错啦');
        })
      }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import '../../../static/css/login/login.css';
.page-box {
  margin:0;padding:0;
  color:#34495e;font:12px/1.5 Microsoft Yahei,Helvetica Neue;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga","kern";
  background-color: #3895e8;
}
.icon-ok-sign:before { content: "\e6d1"; }
</style>
